<template>
    <div>
        <img src="@/assets/banner_01.png" alt class="banner">
        <div class="name_num">长庆油田第二采油厂青年交友平台</div>
        <div class="info">
            <div class="inputs">
                <div class="zm">账号：</div>
                <div>
                    <input id="name" v-model="account" type="text" name placeholder="电话号码">
                </div>
            </div>
            <div class="inputs">
                <div class="zm">密码：</div>
                <div>
                    <input id="password" v-model="password" type="password" name placeholder="请输入密码">
                </div>
            </div>
            <button type="submit" class="register-btn" @click="submit">登录</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            account: '',
            password: ''
        };
    },
    methods: {
        async submit() {
            const { account, password } = this;
            this.$store.dispatch('user/login', { account, password })
                .then(res => {
                    const {
                        data = {}
                    } = res;
                    if (data.type === 0) {
                        console.log(`是第一次登录`);
                        this.$router.replace({ name: 'ChangePasw' });
                        return;
                    }
                    console.log(`不是第一次登录`);
                    this.$router.replace('/');
                })
                .catch(_ => {
                    this.$dialog.alert({
                        message: '帐号或密码错误'
                    });
                });
        }
    }
};
</script>

<style scoped>
body {
  width: 100%;
  margin: 0 auto;
}
.banner {
  width: 100%;
}
.name_num {
  text-align: center;
  margin: 15px auto 20px;
  font-size: 1.125rem;
  font-weight: bold;
}
.info {
  width: 80%;
  margin: 3% auto;
}

.info input {
  width: 205px;
  margin: 3% auto;
}
input {
  padding: 0 3px;
  border: none;
  background: none;
  color: #202124;
  font-size: 14px;
  height: 35px;
  line-height: 35px;
  /* border: 1px solid #000; */
  outline: 0;
}
.register-btn {
  background: #e06363;
  width: 100%;
  height: 40px;
  line-height: 40px;
  border: none;
  border-radius: 6px;
  margin-top: 5%;
  color: #fff;
}
.inputs {
  /* width: 100%; */
  display: flex;
  justify-content: start;
  height: 50px;
  line-height: 50px;
  border: 1px solid #6392ea;
  border-radius: 6px;
  margin-bottom: 30px;
  padding: 0 0 0 18px;
}
.zm {
  font-weight: bold;
}
</style>

